<template>
	<view class="content">
		<view class="top">
			<image class="prev-icon" src="../../static/images/room/prev.png" mode="aspectFit" @click="prev"></image>
			<view class="mydevice">新增设备</view>
			<image class="plus-icon" src="../../static/images/room/Scan.png" mode="aspectFit" @click="handlePlus"></image>
		</view>
		<view class="nav">
			<view class="flex_between">
				<view :class="['bottom_title', { 'active1': isActive === 1 }]" @click="chenked(1)">
					附近的设备
				</view>
				<view :class="['bottom_title', { 'active1': isActive === 2 }]" @click="chenked(2)">
					手动添加
				</view>
			</view>
		</view>
		<!-- nav-item -->
		<scroll-view class="page-container" scroll-x="true" :scroll-into-view="activeView" scroll-with-animation>
			<view class="page1" id="page1" v-if="isActive === 1">
				<view class="title">
					正在寻找附近的设备...
				</view>
				<view class="wifi_title">
					<image src="../../static/images/device/lanya1.png" class="ly"></image>
					<image src="../../static/images/device/wifi1.png" class="wifi"></image>
					<view class="connect">打开wifi和蓝牙进行连接</view>
				</view>
				<view class="draw">
					<!-- <canvas style="width: 300px; height: 300px;margin-top: 20rpx;" canvas-id="myCanvas"></canvas> -->
					<image class="yuan" src="../../static/images/device/yuan.png"></image>
				</view>
				<view class="flex_between1">
					<view class="button-con">连接到所有设备</view>
				</view>
				<view class="flex_between1">
					<view class="found">找不到您的设备？</view>
				</view>
				<view class="flex_between1">
					<view class="knowmore">了解更多</view>
				</view>
				
			</view>
			<view class="page2" id="page2" v-if="isActive === 2">
				<view class="title">请选择设备类型</view>
				<view class="second">
					<view class="device-List" v-for="(device,index) in deviceList" :key="index">
						<view class="bac">
							<image :src="device.image" class="device-ima"  @click="handleDeviceClick(device.types)"></image>
						</view>
						<view class="device-types">{{device.types}}</view>
					</view>
					
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive: 1,
				activeView: 'page1',
				x: 150, // 圆心x坐标
				y: 300, // 圆心y坐标
				r: 100, // 圆的半径
				borderColor: '#405ff2', // 圆边框颜色
				borderWidth: 5 ,// 圆边框宽度
				deviceList:[
					{
						types:'灯泡',
						image: '../../static/images/device/dengpao.png'
					},{
						types: '时钟',
						image: '../../static/images/device/shizhong.png'
					},{
						types: '冰箱',
						image: '../../static/images/device/bingxiang.png'
					},{
						types: '床',
						image: '../../static/images/device/chuang.png'
					},{
						types: '风扇',
						image: '../../static/images/device/fengshan.png'
					},{
						types: '马桶',
						image: '../../static/images/device/matong.png'
					},{
						types: '游戏手柄',
						image: '../../static/images/device/shoubing.png'
					},{
						types: '台灯',
						image: '../../static/images/device/taideng.png'
					},{
						types: '手机',
						image: '../../static/images/device/shouji.png'
					},{
						types: '电视',
						image: '../../static/images/device/dianshi.png'
					},{
						types: '锅',
						image: '../../static/images/device/guo.png'
					},{
						types: '插座',
						image: '../../static/images/device/chazuo.png'
					},{
						types: '插头',
						image: '../../static/images/device/chatou.png'
					},{
						types: '空调',
						image: '../../static/images/device/kongtiao.png'
					},{
						types:'其他',
					image: '../../static/images/device/qita.png'	
					}
				]
			};
		},
		 mounted() {
		    this.drawCircle();
		  },
		methods: {
			chenked(type) {
				this.isActive = type;
				this.activeView = `page${type}`;
			},
			prev() {
				uni.navigateBack({
					delta: 1 // 返回上一个页面
					// url: ".../work/index.vue"
				});
			},
			 drawCircle() {
			      let ctx = uni.createCanvasContext('myCanvas', this);
			      //ctx.clearRect(0, 0, 300, 300); // 清除画布，确保没有残留内容
			      ctx.beginPath();
			      ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
			      ctx.setStrokeStyle(this.borderColor); // 设置边框颜色
			      ctx.setLineWidth(this.borderWidth); // 设置边框宽度
			      ctx.stroke(); // 绘制边框
			      ctx.draw(); // 将绘制内容呈现到画布上
			    },
				handleDeviceClick(types) {
					console.log('device types:', types);
					uni.navigateTo({
						url: `/pages/device/new_device?types=${encodeURIComponent(types)}`
					});
				}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}

	.top {
		display: flex;
		align-items: center;
		height: 52px;
		background-color: white;
		padding: 4px;
		position: fixed;
		/* 将状态栏固定在最上方 */
		top: 0;
		/* 从顶部开始定位 */
		left: 0;
		/* 从左侧开始定位 */
		width: 100%;
		/* 宽度100%，充满整个屏幕 */
		z-index: 9999;
		/* 确保状态栏位于其他内容上方 */
		border-bottom: 1.5px solid #f0f0f0;
		/* 下方灰色边框线 */
	}

	.prev-icon {
		flex: 1;
		width: 100%;
		height: 100%;
		object-fit: contain;
		margin-right: 86px;
		padding: 3px;
	}

	.mydevice {
		flex: 1.5;
		font-size: 18px;
		color: #4e6490;
		font-weight: bold;

	}

	.plus-icon {
		flex: 1;
		width: 80%;
		height: 80%;
		object-fit: contain;
		margin-left: 86px;
		padding: 3px;
	}

	.nav {
		margin-top: 60px;
		padding-bottom: 5px;
		display: flex;
		justify-content: space-around;
	}

	.flex_between {
		display: flex;
		justify-content: space-around;
		padding-top: 20rpx;
		
	}

	.bottom_title {
	border-radius: 10px;
		width: 320rpx;
		text-align: center;
		padding: 10px;
		flex: 1;
		background-color: #f0f0f0;
	}

	.active {
		font-weight: bold;
		color: #10151f;
		background-color: #e5e5e5;
	}

	.active1 {
		font-weight: bold;
		background-color: #405ff2;
		color: white;
	}

	.page-container {
		display: flex;
		  flex-direction: row;
		  width: 100%;
		  // height: calc(100vh - 20rpx); 
		  align-items: center;
		  justify-content: center;
		  font-weight: bold;
		  // background-color: #10151f;
		/* 根据需要调整高度 */
	}

	.page1 {
		// height: calc(100vh - 120px); 
		// background-color: #10151f;
	}
	.page2 {
		// height: calc(100vh - 120px); 
		// background-color: #10151f;
		margin-bottom: 20rpx;
		// background-color: #10151f;
	}
	.title{
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		min-width: 100%;
		padding: 15px;
		font-size: 38rpx;
		color: #333;
	}
	.wifi_title{
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f7f7f7;
		  padding: 18rpx;
		  width: 60%; /* 更改为你所需要的宽度 */
		  max-width: 800rpx; /* 可选：设置最大宽度 */
		  margin: 0 auto; /* 使元素在父容器中居中 */
		  border-radius: 150rpx;
	}
	.wifi_title > image,
	.wifi_title > view {
	  margin: 0 12rpx; /* 左右两侧增加 20rpx 的间距 */
	}
	.ly{
		height: 40rpx;
		width: 40rpx;
		border-radius: 150rpx;
	}
	.wifi{
		height: 40rpx;
		width: 40rpx;
		border-radius: 150rpx;
	}
	.connect{
		font-size: 24rpx;
		color: #919191;
	}
	.draw{
		 display: flex;
		  justify-content: center;
		  align-items: center;
		  height: 300px;
	}
	.canvas {
	 display: block;
	   margin: 20rpx auto;
	  
	  background-color: transparent;
	}
	.yuan{
		margin-bottom: -82rpx;
		  border-radius: 150rpx;
		  height: 620rpx;
	}
	.flex_between1{
		display: flex;
		justify-content: space-around;
		padding-top: 82rpx;
		
	}
	
	.button-con{
			display: flex; 
		    align-items: center; 
		    justify-content: center; 
		    font-weight: bold;
		    background-color: #405ff2;
		    color: white;
		    border-radius: 150rpx;
		    text-align: center;
		    width: 400rpx; 
		    height: 100rpx; 
	}
	.found{
		margin-top: -12rpx;
	}
	.knowmore{
	color: #598ff2;
	margin-top: -39rpx;
	}
	.second {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between; 
	    padding: 24rpx; /* 可根据需要调整 */
	}
	.text{
		
	}
	
	.device-List {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    width: 33%; /* 确保每个项目占据视口宽度的一半，稍微缩小以便间距 */
	    margin-bottom: 40rpx; /* 底部间距，确保每行之间有间距 */
	    box-sizing: border-box; /* 包括padding和border在内的总宽度 */
		
	}
	.bac{
		height:132rpx;
		width: 132rpx;
		background-color: #f7f7f7;
		border-radius: 80rpx;
	}
	.device-ima {
	    width: 80rpx; 
	    height: 80rpx; 
		margin-left: 30rpx;
		margin-top: 30rpx;
	    object-fit: cover; /* 确保图片按比例填充 */
		
	}
	
	.device-types {
	    margin-top:11rpx; /* 调整文字与图片的间距 */
	    text-align: center;
		font-size: 15px;
		
	}

</style>